<template>
	<view >
		<uni-nav-bar  leftIcon="left" :border="false" backgroundColor="#f8f4f3"  statusBar title="我的订单" @clickLeft="clickLeft" fixed=true> </uni-nav-bar>
	<view class="orderPage">
		<view class="sub"><u-subsection :list="list" bgColor="#eeeeee" :current="curNow" @change="sectionChange" ></u-subsection></view>
	<view class="orderList">
		<view class="row" @click="goDetail(item)" v-for="item in orderList" :key="item._id"> 
			<view class="head">
				<view class="head-left">订单编号{{item.order_no}}</view>
				<view class="head-right">
					<text class="way">商家外送</text>
					<text :class="item.status == 0?'err':'pay'" >{{statusText(item.status)}}</text>
				</view>
				
			</view>
			<view class="body" v-if="item.orderType !='payment'">{{getCarsListName(item.carsList)}}</view>
			<view class="body" v-else>直接转账给商家</view>
			<view class="footer">
				<view class="time">{{formatTimestamp(item.createTime)}}</view>
				<view class="count" v-if="item.orderType !='payment'">
					共{{item.carsList.length}}件商品，实付<text class="price">￥{{item.total_fee}}</text>
				</view>
			</view>
		</view>
	</view>
	</view>
	</view>
</template>

<script>
	import {formatTimestamp } from '@/utils/tools.js'
	const orderCloudObj = uniCloud.importObject("wanshop-mall-order");
	export default {
		data() {
			return {
				list: ['未付款', '待收货', '售后中'],
								// 或者如下，也可以配置keyName参数修改对象键名
								// list: [{name: '未付款'}, {name: '待评价'}, {name: '已付款'}],
				curNow: 0,
				orderList:[]
			};
		},
		onLoad() {
			this.getOrderList()
		},
		methods: {
			formatTimestamp,
			clickLeft(){
				uni.reLaunch({
					url:"/pages/index/index"
				})
			},
			async getOrderList(){
				let res = await orderCloudObj.getOrderList();
				console.log(res);
				 this.orderList = res.data
			},
			// 支付状态的显示
			statusText(value){
				let obj = {
					"-2":"支付异常",
					"-1":"已关闭",
					"0":"未支付",
					"1":"已支付",
					"2":"部分退款",
					"3":"已全额退款"
				};
				return obj[value]
			},
			
			sectionChange(index) {
				this.curNow = index;
			},
			// 跳转到详情页
			goDetail(value){
				let params = encodeURI(JSON.stringify(value));
				
				uni.navigateTo({
					url:"/pages/order/detail?item="+params
				})
			},
			getCarsListName(arr){
				let name = arr.map(item=>{
					return item.name
				})
				return name.join("/")
			}
		}
	}
</script>

<style lang="scss">
page{
	background: $page-bg-color;
}
.sub{
		padding: 20rpx 10rpx;
	}
.orderList{
	padding: 20rpx;
	.row{
		background: #ffffff;
		padding: 40rpx 20rpx;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
		.head{
			@include flex-box();
			.head-left{
				@include flex-box-set(start);
				font-size: 26rpx;
				margin-right: 5%;
				.way{
					background: #19be6b;
					color: #ffffff;
					font-size: 24rpx;
					padding: 6rpx 20rpx;
					border-radius: 24rpx;
					margin-left: 10rpx;
				}
			}
			.head-right{
				@include flex-box-set(start,end);
				color: $brand-theme-color-aux;
				.pay{
					font-size: 24rpx;
				}
				.err{
					color: #Fd5c1c;
					font-size: 24rpx;
				}
			}
		}
		.body{
			border: 1rpx solid $border-color;
			padding: 60rpx 20rpx;
			border-radius: 10rpx;
			background: #f7f7f7;
			font-size: 32rpx;
			margin: 30rpx 0;
		}
		.footer{
			@include flex-box();
			font-size: 24rpx;
			color: #787878;
			.price{
				font-weight: bold;
				color: $brand-theme-color;
			}
		}
	}
}
</style>
